.topbar {
	width: 790px;
	height: 60px;
	position: relative;
	margin:20px;
	background: #363636;
	border-right-color: #2F2F2F;
	border-right-style: solid;
	border-right-width: 1px;

	
}

/*
	global
*/

body {
	color:#ccc;font-size:24px;font-family: 'Open Sans', sans-serif;
	overflow:auto;
}

.logo-box-container {
	width: 1280px;
}

.logo-box {
	position:relative;
	width:800px;
	float:left;
	margin:20px;

}
.logo-box.key {
	width: 70px;
		z-index: 200;
}
.logo-box.title {
		z-index: 200;
	width: 140px;
}
.logo-box.profile {
		z-index: 200;
	width: 60px;
}
.logo-box.profile img {
	padding:43px 0px 0 30px;
}

.topbar.type {
	width:90px;
	background:#fff;
	border:none;
	vertical-align:middle;
	line-height: 64px;
}
.topbar.key {
	width: 60px;
	height: 59px;
/*	background: whiteSmoke;*/
	line-height: 55px;
	border-bottom: 1px solid #E5E5E5;
}
	



.expand-menu.enter {
	-webkit-backface-visibility:hidden;
	-webkit-animation: wipe 3s infinite;
	-webkit-animation-delay: 1s;
	-webkit-animation-direction: alternate;
}

.expand-menu .line {
  position: absolute;
  width: 21px;
  height: 13px;
  left: 8px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  background: url(/static/images/as-icons/08-2.png) no-repeat 0 0;
  opacity: .5;
}

.expand-menu:hover .line, .expand-menu.over .line {
  opacity: 1;
}

.expand-menu .line1 {
  background-image: url(/static/images/as-icons/08-1.png);
}

.expand-menu .line3 {
  background-image: url(/static/images/as-icons/08-3.png);
}

.expand-menu.enter .line {
  -webkit-transform: scaleX(1) translateX(0);
  -webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
  -webkit-transition-delay: .4s;
  -webkit-backface-visibility:hidden;
}

.expand-menu.enter .line2 {
  -webkit-transition-delay: .45s;
}

.expand-menu.enter .line3 {
  -webkit-transition-delay: .5s;
}



	
	
	
/*as-logo08*/
.as-logo08 {
		opacity: 0.25;
}
.as-logo08 .line{
	position: absolute;
  left: 13px;
  top: 24px;
  width: 21px;
  height: 13px;
  cursor: pointer;
	margin: auto auto;
	opacity: 0;
	-webkit-transform: scaleX(8) translateX(-44px);
	-webkit-backface-visibility:hidden;
}
.as-logo08:hover {
	opacity: 0.5;
}
.as-logo08 .line1{
	background: url(/static/images/as-icons/08-1.png) no-repeat 0 0;
}
.as-logo08 .line2{
	background: url(/static/images/as-icons/08-2.png) no-repeat 0 0;
}
.as-logo08 .line3{
	background: url(/static/images/as-icons/08-3.png) no-repeat 0 0;
}

.as-logo08.enter .line {
  -webkit-transform: scaleX(1) translateX(0);
  opacity: 1;
  -webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
  -webkit-backface-visibility:hidden;
}

.as-logo08.enter .line2 {
  -webkit-transition-delay: .05s;
}

.as-logo08.enter .line3 {
  -webkit-transition-delay: .1s;
}


	
/*as-logo11*/
.as-logo11 {
	position: absolute;
  left: 19px;
  top: 22px;
  width: 8px;
  height: 15px;
  background: url(/static/images/as-icons/11.png) no-repeat 0 0;
  cursor: pointer;
	margin: auto auto;
	opacity: 0.25;
	-webkit-backface-visibility:hidden;
}
.as-logo11:hover {
	opacity: 0.5;
}


/*as-logo00*/
.as-logo00:hover {
	opacity: 0.5;
}

.as-logo00 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  margin: auto 0;
}

.as-logo00 .line {
  position: absolute;
  width: 14px;
  height: 2px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
	margin: auto auto;
  background: #ccc;
  -webkit-transform: scaleX(8) translateX(-44px);
	-webkit-backface-visibility:hidden;
	opacity: 0;
}

.as-logo00:hover .line {
  background: #666;
}

.as-logo00 .line1 {
  bottom: 8px;
}
.as-logo00 .line3 {
  top: 8px;
}

.as-logo00.enter .line {
  -webkit-transform: scaleX(1) translateX(0);
  opacity: 1;
  -webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
  -webkit-backface-visibility:hidden;
}

.as-logo00.enter .line2 {
  -webkit-transition-delay: .05s;
}

.as-logo00.enter .line3 {
  -webkit-transition-delay: .1s;
}


/*
	logo08-v2
*/
@-webkit-keyframes bounce-08-v2{
	0% {margin-left:-100px;opacity:0}
	50% {margin-left: 4px;}
	80% {margin-left: -3px;}
	100%{margin-left:  0px;opacity:1;}
}
#logo08-v2 .line{
/*  margin: auto 20px auto 16px;*/
	opacity: 0;
}

#logo08-v2.enter .line{
	-webkit-animation-name:bounce-08-v2;
	-webkit-animation-duration:.6s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:alternate;
	opacity: 1;
}

/*
	logo08-v3
*/
@-webkit-keyframes wipe-08-v3 {
	0% {
		-webkit-mask-position: -10px 0;
		opacity: 0;
	}
	100% {
		-webkit-mask-position: 0px 0px;
		opacity: 0.25;
	}
}
#logo08-v3 .line-08-v3{
	opacity: 0;

	-webkit-mask-position: -11px 0;
	-webkit-mask-size: 20px 20px;
	-webkit-mask-image: -webkit-gradient(linear, left top, right top,
	   color-stop(0.00,  rgba(0,0,0,1)),
	   color-stop(0.45,  rgba(0,0,0,1)),
	   color-stop(0.50,  rgba(0,0,0,0)),
	   color-stop(0.55,  rgba(0,0,0,0)),
	   color-stop(1.00,  rgba(0,0,0,0)));
}
#logo08-v3.enter .line-08-v3 {
	-webkit-backface-visibility:hidden;
	
	-webkit-transform: scaleX(8) translateX(0px);
	-webkit-animation-name: wipe-08-v3;
	-webkit-animation-duration:0.3s;
	-webkit-animation-iteration-count:1;
	
	-webkit-animation-direction: alternate;
	-webkit-mask-position: 0 0;
	opacity: 1;
}
#logo08-v3.enter .line {
  -webkit-transform: scaleX(1) translateX(0);
  opacity: 1;
  -webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
  -webkit-backface-visibility:hidden;
}

#logo08-v3.enter .line2 {
  -webkit-transition-delay: 0s;
}

#logo08-v3.enter .line3 {
  -webkit-transition-delay: 0s;
}

/*
	logo-08-v4
*/
@-webkit-keyframes pop-08-v4 {
	0% {
		-webkit-transform: scaleX(0) scaleY(0);
		opacity: 0;
	}
	60% {
		-webkit-transform: scaleX(1.08) scaleY(1.08);
		opacity: 0.5;
	}
	80% {
		-webkit-transform: scaleX(0.9) scaleY(.9);
		opacity: 0.75;
	}
	100% {
		-webkit-transform: scaleX(1) scaleY(1);
		opacity: 1;
	}
}

#logo08-v4 .line{
	opacity: 0;
	-webkit-transform: scaleX(1) translateX(0);
}

#logo08-v4.enter .line{
	-webkit-backface-visibility:hidden;
	-webkit-animation-name:pop-08-v4;
	-webkit-animation-duration:0.3s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction: alternate;
	opacity: 0.25;
}
#logo08-v4.enter .line {
  -webkit-transform: scaleX(1) translateX(0);
  opacity: 1;
  -webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
  -webkit-backface-visibility:hidden;
}

/*
	logo08-v5
*/
#logo08-v5 .line{
	-webkit-backface-visibility:hidden;
	opacity: 0;
  -webkit-transform: translateX(-100px) rotate(360deg);
	-webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
	-webkit-transition-property: opacity, -webkit-transform;
  }
	
#logo08-v5.enter .line{
	-webkit-backface-visibility:hidden;
	opacity: 1;
  -webkit-transform: translateX(0px) rotate(0deg);
  -webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
}
#logo08-v5.enter .line2 {
  -webkit-transition-delay: 0.03s;
}

#logo08-v5.enter .line3 {
  -webkit-transition-delay: 0.06s;
}

/*
	logo-08-v6
*/
@-webkit-keyframes pop-08-v6 {
	0% {
		-webkit-transform: translateX(-100px);
		opacity: 1;
	}
	50% {
		-webkit-transform: scaleX(1) scaleY(1) translateX(0px);
		opacity: 0.5;
	}
	60% {
		-webkit-transform: scaleX(0.9) scaleY(.9) translateX(0px);
		opacity: 0.75;
	}
	75% {
		-webkit-transform: scaleX(1.08) scaleY(1.08) translateX(0px);
		opacity: 0.75;
	}
	100% {
		-webkit-transform: scaleX(1) scaleY(1) translateX(0px);
		opacity: 1;
	}
}

#logo08-v6 .line{
	opacity: 0;
	-webkit-transform: scaleX(1) translateX(0px);
	-webkit-transform: translateX(-100);
}

#logo08-v6.enter .line{
	-webkit-backface-visibility:hidden;
	-webkit-animation-name:pop-08-v6;
	-webkit-animation-duration:0.5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction: alternate;
	opacity: 0.25;
}
#logo08-v6.enter .line {
  -webkit-transform: scaleX(1) translateX(0px);
  opacity: 1;
  -webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
  -webkit-backface-visibility:hidden;
}
#logo08-v6.enter .line2 {
  -webkit-transition-delay: 0.3s;
}

#logo08-v6.enter .line3 {
  -webkit-transition-delay: 0.5s;
}

/*
	logo08-v7
*/

.logo08-v7 {
	
}

/*
	logo00-v2
*/
@-webkit-keyframes bounce-00-v2{
	0% {margin-left:-100px;opacity:0}
	50% {margin-left: 20px;}
	80% {margin-left: 13px;}
	100%{margin-left:16px;opacity:1;}
}
#logo00-v2 .line{
  margin: auto 20px auto 16px;
	opacity: 0;
}

#logo00-v2.enter .line{
	-webkit-animation-name:bounce-00-v2;
	-webkit-animation-duration:.6s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:alternate;
	opacity: 1;
}

/*
	logo00-v3
*/
@-webkit-keyframes wipe-00-v3 {
	0% {
		-webkit-mask-position: -10px 0;
		opacity: 0;
	}
	100% {
		-webkit-mask-position: 0px 0px;
		opacity: 0.25;
	}
}
#logo00-v3 .line-00-v3{
	opacity: 0;

	-webkit-mask-position: -11px 0;
	-webkit-mask-size: 20px 20px;
	-webkit-mask-image: -webkit-gradient(linear, left top, right top,
	   color-stop(0.00,  rgba(0,0,0,1)),
	   color-stop(0.45,  rgba(0,0,0,1)),
	   color-stop(0.50,  rgba(0,0,0,0)),
	   color-stop(0.55,  rgba(0,0,0,0)),
	   color-stop(1.00,  rgba(0,0,0,0)));
}
#logo00-v3.enter .line-00-v3 {
	-webkit-backface-visibility:hidden;
	
	-webkit-transform: scaleX(8) translateX(0px);
	-webkit-animation-name: wipe-00-v3;
	-webkit-animation-duration:0.3s;
	-webkit-animation-iteration-count:1;
	
	-webkit-animation-direction: alternate;
	-webkit-mask-position: 0 0;
	opacity: 1;
}
#logo00-v3.enter .line {
  -webkit-transform: scaleX(1) translateX(0);
  opacity: 1;
  -webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
  -webkit-backface-visibility:hidden;
}

#logo00-v3.enter .line2 {
  -webkit-transition-delay: 0s;
}

#logo00-v3.enter .line3 {
  -webkit-transition-delay: 0s;
}

/*
	logo-00-v4
*/
@-webkit-keyframes pop-00-v4 {
	0% {
		-webkit-transform: scaleX(0) scaleY(0);
		opacity: 0;
	}
	60% {
		-webkit-transform: scaleX(1.25) scaleY(1.25);
		opacity: 0.5;
	}
	80% {
		-webkit-transform: scaleX(0.8) scaleY(.8);
		opacity: 0.75;
	}
	100% {
		-webkit-transform: scaleX(1) scaleY(1);
		opacity: 1;
	}
}

#logo00-v4 .line{
	opacity: 0;
	-webkit-transform: scaleX(1) translateX(0);
}

#logo00-v4.enter .line{
	-webkit-backface-visibility:hidden;
	-webkit-animation-name:pop-00-v4;
	-webkit-animation-duration:0.4s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction: alternate;

	-webkit-transform: scaleX(1) translateX(0);
  opacity: 1;
}
#logo00-v4.enter .line {

}

/*
	logo00-v5
*/
#logo00-v5 .line{
	-webkit-backface-visibility:hidden;
	opacity: 0;
  -webkit-transform: translateX(-100px) rotate(360deg);
	-webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
	
  }
	
#logo00-v5.enter .line{
	-webkit-backface-visibility:hidden;
	opacity: 1;
  -webkit-transform: translateX(0px) rotate(0deg);
  -webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
-webkit-transition-property: opacity, -webkit-transform;
}
#logo00-v5.enter .line2 {
  -webkit-transition-delay: 0.03s;
}

#logo00-v5.enter .line3 {
  -webkit-transition-delay: 0.06s;
}

/*
	logo11-v1
*/
#logo11-v1 {
	opacity: 0;
  -webkit-transform: translateX(-100px) rotate(270deg);
	-webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
  }

	#logo11-v1.enter.open {
		-webkit-transform: rotate(180deg);
		-webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
	}
	
#logo11-v1.enter {
		opacity: 0.25;
  -webkit-transform: translateX(0px) rotate(0deg);
  -webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
}

/*
	logo11-v2
*/
@-webkit-keyframes bounce{
	0% {margin-left:-100px;opacity:0}
	25% {margin-left: 5px;}
	50% {margin-left: -3px;}
	75% {margin-left:0px;}	
	100%{margin-left:0px;opacity:0.25;}
}

#logo11-v2 {
	opacity: 0;
  }
	#logo11-v2.enter.open {
		-webkit-transform: rotate(180deg);
		-webkit-transition: .6s -webkit-transform cubic-bezier(0.0, 1.000, 0.1, 1.000);
	}

#logo11-v2.enter {
	-webkit-animation-name:bounce;
	-webkit-animation-duration:1s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:alternate;
	opacity: 0.25;
}

/*
	logo11-v3
*/

@-webkit-keyframes wipe {
	0% {
		-webkit-mask-position: -10px 0;
		opacity: 0;
	}
	100% {
		-webkit-mask-position: 0px 0px;
		opacity: 0.25;
	}
}
#logo11-v3 {
	opacity: 0;

	-webkit-mask-position: -11px 0;
	-webkit-mask-size: 20px 20px;
	-webkit-mask-image: -webkit-gradient(linear, left top, right top,
	   color-stop(0.00,  rgba(0,0,0,1)),
	   color-stop(0.45,  rgba(0,0,0,1)),
	   color-stop(0.50,  rgba(0,0,0,0)),
	   color-stop(0.55,  rgba(0,0,0,0)),
	   color-stop(1.00,  rgba(0,0,0,0)));
}
#logo11-v3.enter {
	-webkit-backface-visibility:hidden;
	
	-webkit-animation-name:wipe;
	-webkit-animation-duration:0.3s;
	-webkit-animation-iteration-count:1;
	
	-webkit-animation-direction: alternate;
	-webkit-mask-position: 0 0;
	opacity: 0.25;
}

/*
	logo11-v4
*/
@-webkit-keyframes pop {
	0% {
		-webkit-transform: scaleX(0) scaleY(0);
		opacity: 0;
	}
	60% {
		-webkit-transform: scaleX(1.1) scaleY(1.1);
		opacity: 0.25;
	}
	80% {
		-webkit-transform: scaleX(0.8) scaleY(0.8);
		opacity: 0.25;
	}
	100% {
		-webkit-transform: scaleX(1) scaleY(1);
		opacity: 0.25;
	}
}
#logo11-v4 {
	opacity: 0;
}

#logo11-v4.enter {
	-webkit-backface-visibility:hidden;
	-webkit-animation-name:pop;
	-webkit-animation-duration:0.4s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction: alternate;
	opacity: 0.25;
}


/*
	logo11-v5
*/
@-webkit-keyframes pop {
	0% {
		-webkit-transform: scaleX(0) scaleY(0);
		opacity: 0;
	}
	60% {
		-webkit-transform: scaleX(1.2) scaleY(1.2);
		opacity: 0.25;
	}
	80% {
		-webkit-transform: scaleX(0.8) scaleY(0.8);
		opacity: 0.25;
	}
	100% {
		-webkit-transform: scaleX(1) scaleY(1);
		opacity: 0.25;
	}
}
#logo11-v5 {
	opacity: 0;
}

#logo11-v5.enter {
	-webkit-backface-visibility:hidden;
	-webkit-animation-name:pop;
	-webkit-animation-duration:0.5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction: alternate;
	opacity: 0.25;
}

/*logo08-v1*/
#logo08-v1 {
	
}

